<template>
    <div class="nav-menu">
        <ul class="clearfix">
            <li :class="{ active: menu.name === menuName }" v-for="menu in props.menus" :key="menu.name">
                <a :href="`/${props.parent}/${menu.name}`">{{ menu.label }}</a>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref, defineProps } from 'vue'
import router from '@/router/index'
const props = defineProps({
    parent: {
        type: String,
        required: true,
    },
    menus: {
        type: Array,
        default: () => {
            return []
        },
    },
})
const menuName = ref('')
router.onReady(() => {
    menuName.value = router.currentRoute.name
})
</script>
<style lang="scss" scoped>
.nav-menu {
    margin: 20px 0 30px;
    text-align: center;
    ul {
        display: inline-block;
        list-style: none;
        li {
            float: left;
            margin: 0 10px;
            a {
                display: block;
                padding: 12px 24px;
                font-size: 16px;
                color: #333;
                background-color: #eee;
                transition: all 0.3s ease;

                &:hover {
                    color: #00a7e1;
                }
            }

            &.active {
                a {
                    background-color: #0d87dc;
                    color: white;
                }
            }
        }
    }
}
</style>
